<template>
    <div class="w-[1200px] mx-auto">
        <div class="flex items-end my-4">
            <div class="text-6 mr-4">停车场模拟器</div>
            <div class="actions mr-4">
            <el-button type="primary" @click="handleCheckoutEnterDoor">{{
                doorOpened?.enterDoor ? '关闭入口' : '打开入口'
            }}</el-button>
            <el-button type="primary" @click="handleCheckoutLeaveDoor">{{
                doorOpened?.leaveDoor ? '关闭出口' : '打开出口'
            }}</el-button>
            <el-button type="primary" @click="handleCreateCar">
                创建车辆
            </el-button>
            <!-- 选择停车场 -->
            <el-select
                class="ml-2"
                v-model="selectedPark"
                placeholder="请选择停车场"
                clearable
            >
                <!-- <el-option label="全部" value="" /> -->
                <el-option
                    v-for="item in parkData"
                    :key="'p' + item.id"
                    :label="item.name"
                    :value="item.id"
                ></el-option>
            </el-select>
        </div>
            <div class="text-4 text-gray">创建车辆后，用鼠标点击选中车辆，再用方向键移动车辆</div>
        </div>
        
        <!-- 大屏幕 -->
        <div class="mb-4 flex">
            <div
                class="enter-door-screen w-[300px] h-[200px] b-1 b-solid b-black p-2 mr-4"
            >
                <div class="mb-2 text-center">入口大屏</div>
                <div class="mb-2">车牌号：{{ enterScreen.carNum }}</div>
                <div class="mb-2">车主：{{ enterScreen.ownerName }}</div>
                <div class="mb-2">
                    公用车位价格：{{ enterScreen.price }} 元/小时
                </div>
                <div class="mb-2">
                    车位类型：{{
                        enterScreen.spaceType === 0 ? '公用车位' : '固定车位'
                    }}
                </div>
                <div class="">
                    可用车位：
                    <template v-for="item in enterScreen.spaceList">
                        <el-tag
                            v-if="isRenderSpace(item)"
                            :key="item.id"
                            type="success"
                            class="mr-1 mb-1"
                            size="small"
                            >{{ item.number }}</el-tag
                        >
                    </template>
                </div>
            </div>
            <div
                class="leave-door-screen w-[400px] h-[200px] b-1 b-solid b-black p-2 flex"
            >
                <div>
                    <div class="mb-2 text-center">出口大屏</div>
                    <div class="mb-2">车牌号：{{ leaveScreen.carNum }}</div>
                    <div class="mb-2">
                        车位价格：{{ leaveScreen.hourPrice }} 元/小时
                    </div>
                    <div class="mb-2">停车时长：{{ leaveScreen.dis }}</div>
                    <div class="mb-2">停车费：{{ leaveScreen.price }}</div>
                    <div class="mb-2">
                        车位类型：{{
                            leaveScreen.spaceType === 0
                                ? '公用车位'
                                : '固定车位'
                        }}
                    </div>
                </div>
                <div v-if="qrCodeInfo.url" class="self-center ml-16">
                    <div>
                        <img class="w-[150px]" :src="qrCodeInfo.img" alt="" />
                    </div>
                    <div>
                        扫码付款 或
                        <el-link :href="qrCodeInfo.url" target="_blank"
                            >直接付款</el-link
                        >
                    </div>
                </div>
            </div>
        </div>
        <div ref="containerRef" class="mx-auto mb-8 w-full h-[1000px]"></div>
    </div>
</template>

<script setup lang="ts">
import { ElMessageBox } from 'element-plus'
import { nextTick, ref } from 'vue'
import {
    enterScreen,
    leaveScreen,
    parkData,
    qrCodeInfo,
    selectedPark,
} from './screens'
import { Car } from './ts/Car'
import { enterDoor, leaveDoor } from './ts/doors'
import { layer, main } from './ts/index'

// console.log(await QRcode.toDataURL('I am a pony!'))

// 停车场
const containerRef = ref<any>(null)
const doorOpened = ref({
    enterDoor: false,
    leaveDoor: false,
})
const handleCheckoutEnterDoor = () => {
    enterDoor.checkoutOpen()
    doorOpened.value.enterDoor = enterDoor.opened
}
const handleCheckoutLeaveDoor = () => {
    leaveDoor.checkoutOpen()
    doorOpened.value.leaveDoor = leaveDoor.opened
}
nextTick(() => {
    // setTimeout(() => {
        main(containerRef.value)
    // }, 300)
})

// 创建车辆
const handleCreateCar = async () => {
    const carId = await ElMessageBox.prompt('请输入车牌号', '提示')
    if (carId) {
        const car = new Car(layer, carId.value.trim(), {
            x: 100,
            y: 500,
        })
        // cars.push(car)
    }
}

// 是否渲染该车位
const isRenderSpace = (space: any) => {
    // 如果是私人车位则渲染
    if (enterScreen.value.spaceType == 1) {
        return true
    }
    // 如果是公用车位则渲染空闲的
    if (
        enterScreen.value.spaceType == 0 &&
        space.type == 0 &&
        space.status === 0
    ) {
        return true
    }
    return false
}
</script>

<style scoped></style>
